<template>
  <div class="card flex">
    <div class="card__header flex-ac">
      <span class="card__header__title">{{ title }}</span>
      <div class="card__header__icons flex" v-if="isIcon" @click="emits('sendIcon')">
        <span>{{ iconTitle }}</span>
        <SvgIcon :name="iconName" width="14px" height="14px" />
      </div>
    </div>
    <slot />
  </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{ title: string, iconName?: string, iconTitle?: string, isIcon?: boolean }>(), {
  iconName: "xiangyou1",
  iconTitle: "全部",
  isIcon: true,
})
const emits = defineEmits(["sendIcon"])
</script>

<style lang="scss" scoped>
.card {
  flex-direction: column;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;

  &__header {
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #eee;

    &__icons {
      font-size: 14px;
      color: #129D69;
      gap: 4px;
      align-items: center;
    }
  }
}
</style>